<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>


<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<!--<script src="/MatBlazor.Web/dist/matBlazor.js"></script>-->
<!--<link rel="stylesheet" href="https://unpkg.com/js-datepicker/dist/datepicker.min.css">-->
<!--<script src="https://unpkg.com/js-datepicker"></script>-->


<style>
    /*.mdc-dialog .mdc-select {*/
    /*    position: relative !important;*/
    /*}*/

    /*.mdc-dialog .mdc-select__menu {*/
    /*    top: inherit !important;*/
    /*    left: inherit !important;*/

    /*    max-height: calc(100vh - 64px)!important;*/

    /*    margin-top: 44px;*/
    /*}*/


</style>





<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon" id="ref">
    <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
    <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
    <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading"></div>
        <div class="mdc-notched-outline__notch">
            <span class="mdc-floating-label" id="my-label-id">Your Name</span>
        </div>
        <div class="mdc-notched-outline__trailing"></div>
    </div>
</label>







<script type="text/javascript">



   var ref = document.getElementById('ref');
  debugger;
  var c = new mdc.textField.MDCTextField(ref);


</script>


</body>
</html>
